<template>
    <div>
        <h2 >登录页面</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                <td align="right">账号</td>
                <td><input type="text" v-model="loginInfo.name"/></td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td><input type="password" v-model="loginInfo.pwd"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" class="btn btn-info" value="登录" @click="login()"></td>
            </tr>
            </tbody>
        </table>
       
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref,reactive } from "vue";
//导入创建路由器对象的方法
import { useRouter } from "vue-router";
//创建一个路由对象 可以实现页面跳转push方法可以实心跳转页面
const router=useRouter();
//声明登录的数据
let loginInfo=ref({
    name:'',
    pwd:''
})
const login=()=>{
    //1.判断非空和有效性
    if(loginInfo.value.name=='')
    {
        alert("用户名不能为空");
        return;
    }
    if(loginInfo.value.pwd=='')
    {
        alert("密码不能为空");
        return;
    }
    //2.发送网络请求到数据库中燕麦账号和密码是否正确
    axios({
        url:'/api/Admin/Login',//后端请求方式
        method:'post',//请求方式
        params:loginInfo.value,//params 当请求方式是get的时候写params,
        
    })
    .then((res)=>{
        //then相当于success 成功 res返回成功的结果
        console.log(res);
        if(res.data==-1)
        {
            alert("账号不存在");
            return;
        }
        if(res.data==-2)
        {
            alert("密码错误");
            return;
        }
        alert("登陆成功");
        //1.提示登陆成功
        router.push('/adduser');
        //2.存储用户信息
        //3.跳转到会员增加

    })
    .catch((err)=>{
        //catch相当于error 失败 catch后端请求失败时的结果  
        console.log(err);
    })
}
</script>

<style scoped>

</style>